<style lang='less' >
	@import '~style/table.less';

</style>

<template>
 <div id='couponRecordFormBox'>
    <div class="dataBox" v-if='data'>
        <el-table
        :data="data"
        height="400"
        :default-sort = "{prop: 'id', order: 'descending'}"
        style="width: 100%">
            <el-table-column
                prop="id"
                sortable
                label="序号"
                width='100'>
            </el-table-column>
            <el-table-column
                prop="cardIdText"
                label="卡券ID"
                width='200'>
            </el-table-column>
            <el-table-column
                prop="name"
                label="名称"
                width='150'>
            </el-table-column>
            <el-table-column
                prop="type"
                label="类型"
                :formatter='getShowType'
                width='80'>
            </el-table-column>
            <el-table-column
                prop="faceValue"
                label="面值"
                width='100'>
            </el-table-column>

            <!-- ------使用记录的列表 -start-------- -->
            <el-table-column
                v-if='viewType=="COUPON_USED"'
                prop="statusStr"
                label="使用状态"
                width='100'
            ></el-table-column>
            <el-table-column
                v-if='viewType=="COUPON_USED"'
                prop="moblie"
                label="用户账号"
                width='130'>
            </el-table-column>
            <el-table-column
                v-if='viewType=="COUPON_USED"'
                prop="userName"
                label="姓名"
                width='100'>
            </el-table-column>
            <el-table-column
                v-if='viewType=="COUPON_USED"'
                prop="exchangeCode"
                label="兑换卡号"
                width='200'>
            </el-table-column>
            <el-table-column
                v-if='viewType=="COUPON_USED"'
                prop="orderId"
                label="订单号"
                width='150'>
            </el-table-column>
            <el-table-column
                v-if='viewType=="COUPON_USED"'
                prop="orderBelongOrg"
                label="订单所属部门"
                width='150'>
            </el-table-column>
            <el-table-column
                v-if='viewType=="COUPON_USED"'
                prop="usedDateStr"
                label="使用时间"
                width='180'>
            </el-table-column>
            <!-- ------使用记录的列表 -end-------- -->

            <!-- ------转发记录的列表 -start-------- -->
            <el-table-column
                v-if='viewType=="COUPON_SEND_BY_FINANCIAL"'
                prop="sourceMobile"
                label="转发人账号"
                width='150'>
            </el-table-column>
            <el-table-column
                v-if='viewType=="COUPON_SEND_BY_FINANCIAL"'
                prop="sourceName"
                label="转发人姓名"
                width='150'>
            </el-table-column>
            <el-table-column
                v-if='viewType=="COUPON_SEND_BY_FINANCIAL"'
                prop="moblie"
                label="领取人账号"
                width='150'>
            </el-table-column>
            <el-table-column
                v-if='viewType =="COUPON_SEND_BY_FINANCIAL"'
                prop="dateCreatedStr"
                label="转发时间"
                width='180'>
            </el-table-column>
            <el-table-column
                v-if='viewType =="COUPON_SEND_BY_FINANCIAL"'
                prop="sourceWayStr"
                min-width='150'
                label="转发来源">
            </el-table-column>
            <!-- ------转发记录的列表 -end-------- -->

            <!-- ------发放记录的列表 -start-------- -->
            <el-table-column
                v-if='viewType=="COUPON_SEND_BY_SYSTEM"'
                prop="sourceName"
                label="发放人"
                width='100'>
            </el-table-column>

            <el-table-column
                v-if='viewType=="COUPON_SEND_BY_SYSTEM"'
                prop="moblie"
                label="领取人账号"
                width='150'>
            </el-table-column>
            <el-table-column
                v-if='viewType=="COUPON_SEND_BY_SYSTEM"'
                prop="userName"
                label="领取人姓名"
                width='150'>
            </el-table-column>
             <el-table-column
                v-if='viewType=="COUPON_SEND_BY_SYSTEM"'
                prop="exchangeCode"
                label="兑换卡号"
                width='200'>
            </el-table-column>
            <el-table-column
                v-if='viewType =="COUPON_SEND_BY_SYSTEM"'
                prop="dateCreatedStr"
                label="发放时间"
                width='180'>
            </el-table-column>
            <el-table-column
                v-if='viewType =="COUPON_SEND_BY_SYSTEM"'
                prop="sourceWayStr"
                min-width='150'
                label="发放来源">
            </el-table-column>
            <!-- ------发放记录的列表 -end-------- -->

            

        </el-table>
    </div>

    <div class="paginationBox">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="filterPageNum.curPage"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="filterPageNum.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total='filterPageNum.totalSize'>
        </el-pagination>
    </div>
 </div>
  
</template>

<script>
    import{typeOption, statusOption} from '../config.js'
    export default {
        props:['data', 'filterPageNum', 'viewType'],
        components:{
        },
        data(){
        return{
            typeOption:typeOption,
            statusOption:statusOption,
            showData:[],
        }
        },
        computed:{
        
        },
        watch:{
        },
        methods:{
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                this.filterPageNum.pageSize = val;
                this.filterPageNum.curPage = 1;
                this.$emit('setfilterConditionListShow')

                
            },
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                this.curPage = val;
                this.$emit('setfilterConditionListShow')

                
            },
            
            getShowType(row, column){
                for(let i =0;i < typeOption.length;i++){
                    if(typeOption[i].name == row.type){
                        return typeOption[i].value
                    }
                }
            },
            getShowStatus(row, column){
                if(row.status == 'DISABLE'){
                }
                return row.status == 'ENABLE'? '启用' :  row.status == 'DISABLE'? '禁用' :''
            },
            
            
        },
        created(){

        },
        mounted(){

        },
    }
</script>